<!DOCTYPE html>
<html>
    <head>
        <title>1</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       <div id="root">
            <h1 :style="{opacity}">Vue生命周期</h1>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false
            const vm = new Vue({
                el: '#root',
                data() {
                    return {
                        opacity: 1
                    }
                },
                mounted() {
                    setInterval(() => {
                        vm.opacity -= 0.01
                        if (vm.opacity <= 0) {
                            vm.opacity = 1
                        }
                    }, 0.016);
                }
            })
            //这种写法的话不合适
            // setInterval(() => {
            //     vm.opacity-=0.01
            //     if(vm.opacity<=0){
            //         vm.opacity=1
            //     }
            // }, 0.016);
        </script>
    </body>
</html>
